<template>
  <view style="padding-bottom: 120rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :customBack="backToList"
      :title="title"
      :titleWidth="450"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-if="tabIndex == 0"><relations :list="state.Dealer_RelationList"></relations></view>

    <view class="" v-if="tabIndex == 1">
      <basic-information
        v-if="state.ShowLevel == 1"
        :metadata="state.DataBaseInfo"
        :showOtherInfo="false"
        :showReview="false"
        :showGrade="false"
        :showParent="false"
        :loadCity="loadCity"
        :data="{
          Dealer_BaseInfo: state.First_Dealer_BaseInfo
        }"
      ></basic-information>

      <block v-if="state.ShowLevel == 2">
        <u-cell-item
          title="一级经销商名称"
          :arrow="false"
          :value="state.First_Dealer_BaseInfo.Name"
          :border-bottom="false"
        ></u-cell-item>
        <basic-information
          :level="2"
          :metadata="state.DataBaseInfo"
          :showOtherInfo="false"
          :showReview="false"
          :showGrade="false"
          :showParent="false"
          :loadCity="loadCity"
          :data="{
            Dealer_BaseInfo: state.Double_Dealer_BaseInfo
          }"
        ></basic-information>
      </block>

      <block v-if="state.ShowLevel == 3">
        <u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
        <u-cell-item
          title="二级经销商名称"
          :arrow="false"
          :value="state.Double_Dealer_BaseInfo.Name"
          :border-bottom="false"
        ></u-cell-item>
        <store-information :loadCity="loadCity" :data="state.Door_Dealer_BaseInfo"></store-information>
      </block>
    </view>

    <view style="" v-if="tabIndex == 2">
      <outdoor-apply
        @edit="() => onEdit(item)"
        :applyType="2"
        v-for="(item, index) in state.OutdoorSuitsDetail"
        :key="index"
        :value="item"
        :index="index"
      ></outdoor-apply>
    </view>

    <view class="" v-if="tabIndex == 3">
      <u-cell-item title="验收照片" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
      <u-cell-item :arrow="false" style="padding: 10rpx;">
        <image-upload :multiple="true" v-model="applyPhoto" :maxCount="5"></image-upload>
      </u-cell-item>

      <u-cell-item title="备注" :arrow="false">
        <u-input inputAlign="right" type="textarea" placeholder="验收备注" v-model="form.Remake"></u-input>
      </u-cell-item>
    </view>

    <view class="btn-group-fixed">
      <u-button :disabled="btnDisabled" type="warning" @tap="submit">保存提交</u-button>
    </view>

    <u-popup
      title="户外样机验收"
      mode="bottom"
      height="80%"
      :border-radius="24"
      v-model="showApplyModal"
      :mask-close-able="true"
      :showLoading="false"
      :async-close="true"
    >
      <view class="" style="padding-bottom: 120rpx;position: relative;">
        <view class="u-font-28 u-text-center" style="margin: 20rpx 0;font-weight: bold;">户外套装验收</view>
        <outdoor-apply-form
          ref="outdoorApplyForm"
          :applyType="2"
          :loadForm="loadForm"
          :selectType="selectType"
        ></outdoor-apply-form>
        <view class="btn-group-absolute u-flex">
          <u-button size="medium" @tap="showApplyModal = false">取消</u-button>
          <u-button type="warning" @tap="moduleAcceptance" size="medium">确认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnDisabled: false,
      title: '户外样机验收',

      tabList: [{ name: '销售业务关系' }, { name: '基本信息' }, { name: '户外样机验收' }, { name: '上传验收照片' }],
      tabIndex: 0,

      selectType: 4,

      moduleList: [],
      shellPrototypeList: [],
      entityPrototypeList: [],

      showApplyModal: false,
      loadForm: false,
      loadCity: false,

      areaCode: [],

      state: {
        ApplicationDate: null,
        ApplicationRemake: '',
        ApplyForPhoto: [],
        CompletionPhoto: [],
        DataBaseInfo: {},
        Dealer_RelationList: [],
        DoorHandleInfo: {},
        DoorPhotoList: [],
        Door_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        EntityPrototypeDetail: [],
        FinalAuditNote: '',
        FirstAuditNote: '',
        First_Dealer_BaseInfo: {},
        LogisticsList: [],
        ModuleDetail: [],
        ModultMedalsDetail: [],
        OutdoorSuitsDetail: [],
        ReviewAuditNote: '',
        ShellPrototypeDetail: [],
        ShowLevel: null,
        StateName: '',
        State: null
      },

      applyPhoto: [],

      prototypeList: [{ label: '空壳样机', name: 1 }, { label: '实体样机', name: 2 }],

      form: {
        DealerId: null,
        ModultPrototypeAuditId: null,
        CheckPhoto: '',
        Remake: '',
        DoorHandleInfo: {
          Grade: null,
          Module: null,
          IsDoor: null,
          IsPrototype: null,
          IsGoodDoor: null
        },
        ModuleList: [],
        ShellPrototypeList: [],
        EntityPrototypeList: [],
        OutdoorSuitsList: [],
        MedalsList: []
      }
    };
  },

  onLoad(options) {
    if (options.DealerId) {
      this.DealerId = options.DealerId;
      this.form.DealerId = options.DealerId;
    }
    if (options.ModultPrototypeAuditId) {
      this.form.ModultPrototypeAuditId = options.ModultPrototypeAuditId;
    }
    this.init();

    if (this.$isWeixin()) {
      this.$setTitle(this.title);
    }
  },

  methods: {
    backToList() {
      uni.navigateBack();
    },

    onPrototypeChange(e) {
      console.log(e);
      if (e.length == 2) {
        this.form.DoorHandleInfo.IsPrototype = 3;
      } else {
        this.form.DoorHandleInfo.IsPrototype = e[0];
      }
    },

    onCityChange(e) {
      if (e.province) {
        this.form.Delivery_ProvinceId = e.province.value;
      }
      if (e.city) {
        this.form.Delivery_CityId = e.city.value;
      }
      if (e.area) {
        this.form.Delivery_DistrictId = e.area.value;
      }
    },

    submit() {
      let me = this;
      me.btnDisabled = true;
      this.form.OutdoorSuitsList = this.$u.deepClone(this.state.OutdoorSuitsDetail);
      this.form.OutdoorSuitsList.forEach(item => {
        item.ApplyList.forEach(apply => {
          apply.ApplyTime = apply.CheckTime;
          apply.Remark = apply.CheckRemark;
        });
      });

      this.form.CheckPhoto = this.applyPhoto.map(item => item.Value).join(',');

      if (!this.form.CheckPhoto) {
        this.$u.toast('至少上传一张验收照片');
        return false;
      }

      this.$u.api.saveOutdoorAcceptanceApply(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$u.toast(ResultMessage);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          me.btnDisabled = false;
        }
      });
    },

    addModuleClick(selectType) {
      this.loadForm = false;
      this.selectType = selectType;
      this.showApplyModal = true;
    },

    onEdit(item) {
      this.loadForm = true;
      this.showApplyModal = true;

      this.$nextTick(() => {
        this.$refs.outdoorApplyForm.initForm(Object.assign({}, item));
      });
    },

    moduleAcceptance() {
      const applyForm = this.$refs.outdoorApplyForm.form;

      const currentGroupId = this.$refs.outdoorApplyForm.GroupId;

      let current = this.state.OutdoorSuitsDetail.find(item => item.GroupId == currentGroupId);

      current &&
        current.ApplyList.forEach(apply => {
          this.$set(apply, 'CheckTime', applyForm.ApplyTime);
          this.$set(apply, 'CheckRemark', applyForm.Remark);
          applyForm.ProductList.forEach(item => {
            item.DifferencesNum = parseInt(item.Number) - parseInt(item.CheckNumber);
          });

          apply.ProductList = Object.assign(apply.ProductList, this.$u.deepClone(applyForm.ProductList));
        });

      this.showApplyModal = false;
    },

    init() {
      this.$u.api
        .getModuleDetail({
          DealerId: this.DealerId,
          SelectType: this.selectType,
          ModultPrototypeAuditId: this.form.ModultPrototypeAuditId
        })
        .then(res => {
          console.log(res);

          const { ResultCode, ResultData } = res;
          if (ResultCode === 1) {
            this.state = ResultData;
            this.loadCity = true;
          }
        });
    }
  }
};
</script>

<style>
/* 	page {
		background-color: #eaecef;
	} */
</style>
<style lang="scss"></style>
